<template>
    <div>
        <div class="finace_title carrier_title">载体构成数据</div>
        <div class="flexbox flexcenter carrier_list">
            <div class="carrier_item flexbox flexcenter flexbetween" @click="selectTranType(1)" :class="{'active':carInfo.transaction_type == 1}">
                <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="active_img">
                    <path d="M22 0H0L22 20.5V0Z" fill="#4475FF" />
                    <circle cx="16" cy="6" r="2" fill="white" />
                </svg>
                <div class="car_left">
                    <div class="revenue_title flexbox flexcenter">
                        自营成交金额
                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="7.99998" cy="8.5001" r="6.4" fill="#CFD4DD" />
                            <path d="M5.9 7.58352V7.68352H6H6.99563H7.09563V7.58352C7.09563 7.22446 7.16399 6.95901 7.29458 6.78116L7.29464 6.78121L7.29689 6.77788C7.4381 6.5684 7.67117 6.46154 8.03493 6.46154C8.3138 6.46154 8.5202 6.53535 8.66173 6.67722C8.79814 6.82268 8.87817 7.02501 8.87817 7.29341C8.87817 7.48731 8.80942 7.67619 8.66547 7.85364L8.56575 7.97074C8.28297 8.22491 8.05495 8.4456 7.88263 8.63351C7.71126 8.82039 7.5897 8.98044 7.52616 9.11265C7.39461 9.3687 7.34105 9.67571 7.34105 10.0187V10.1418V10.2418H7.44105H8.44542H8.54541V10.1418V10.0187C8.54541 9.82265 8.58572 9.65332 8.66598 9.49174C8.73851 9.34573 8.84347 9.20725 8.99003 9.08431L8.99005 9.08433L8.99186 9.08274C9.40972 8.71469 9.668 8.47312 9.7514 8.37984L9.7517 8.38011L9.75705 8.37293C9.98162 8.07153 10.1 7.68915 10.1 7.23187C10.1 6.67197 9.91653 6.22096 9.5426 5.89135C9.17037 5.55441 8.68138 5.4 8.09607 5.4C7.42988 5.4 6.89613 5.59092 6.49799 5.98214C6.08947 6.3749 5.9 6.91362 5.9 7.58352ZM8.48142 11.0165L8.48147 11.0165L8.47895 11.0141C8.3276 10.8719 8.13639 10.8024 7.9214 10.8024C7.70507 10.8024 7.52302 10.8728 7.37258 11.0141C7.21862 11.1588 7.14891 11.3449 7.14891 11.5617C7.14891 11.7786 7.21862 11.9647 7.37258 12.1093C7.52051 12.2483 7.70169 12.3298 7.9214 12.3298C8.13773 12.3298 8.31978 12.2595 8.47022 12.1181C8.62279 11.9748 8.70262 11.7807 8.70262 11.5617C8.70262 11.3417 8.62216 11.1582 8.48142 11.0165Z" fill="white" stroke="white" stroke-width="0.2" />
                        </svg>
                    </div>
                    <div class="revenue_num">{{carData.self_employed_all}}</div>
                </div>
                <div class="car_right">{{getPesent(carData.self_employed_all,carData.bring_goods_all)}}%</div>
            </div>
            <div class="carrier_item flexbox flexcenter flexbetween" @click="selectTranType(2)" :class="{'active':carInfo.transaction_type == 2}">
                <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="active_img">
                    <path d="M22 0H0L22 20.5V0Z" fill="#4475FF" />
                    <circle cx="16" cy="6" r="2" fill="white" />
                </svg>
                <div class="car_left">
                    <div class="revenue_title flexbox flexcenter">
                        合作成交金额
                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="7.99998" cy="8.5001" r="6.4" fill="#CFD4DD" />
                            <path d="M5.9 7.58352V7.68352H6H6.99563H7.09563V7.58352C7.09563 7.22446 7.16399 6.95901 7.29458 6.78116L7.29464 6.78121L7.29689 6.77788C7.4381 6.5684 7.67117 6.46154 8.03493 6.46154C8.3138 6.46154 8.5202 6.53535 8.66173 6.67722C8.79814 6.82268 8.87817 7.02501 8.87817 7.29341C8.87817 7.48731 8.80942 7.67619 8.66547 7.85364L8.56575 7.97074C8.28297 8.22491 8.05495 8.4456 7.88263 8.63351C7.71126 8.82039 7.5897 8.98044 7.52616 9.11265C7.39461 9.3687 7.34105 9.67571 7.34105 10.0187V10.1418V10.2418H7.44105H8.44542H8.54541V10.1418V10.0187C8.54541 9.82265 8.58572 9.65332 8.66598 9.49174C8.73851 9.34573 8.84347 9.20725 8.99003 9.08431L8.99005 9.08433L8.99186 9.08274C9.40972 8.71469 9.668 8.47312 9.7514 8.37984L9.7517 8.38011L9.75705 8.37293C9.98162 8.07153 10.1 7.68915 10.1 7.23187C10.1 6.67197 9.91653 6.22096 9.5426 5.89135C9.17037 5.55441 8.68138 5.4 8.09607 5.4C7.42988 5.4 6.89613 5.59092 6.49799 5.98214C6.08947 6.3749 5.9 6.91362 5.9 7.58352ZM8.48142 11.0165L8.48147 11.0165L8.47895 11.0141C8.3276 10.8719 8.13639 10.8024 7.9214 10.8024C7.70507 10.8024 7.52302 10.8728 7.37258 11.0141C7.21862 11.1588 7.14891 11.3449 7.14891 11.5617C7.14891 11.7786 7.21862 11.9647 7.37258 12.1093C7.52051 12.2483 7.70169 12.3298 7.9214 12.3298C8.13773 12.3298 8.31978 12.2595 8.47022 12.1181C8.62279 11.9748 8.70262 11.7807 8.70262 11.5617C8.70262 11.3417 8.62216 11.1582 8.48142 11.0165Z" fill="white" stroke="white" stroke-width="0.2" />
                        </svg>
                    </div>
                    <div class="revenue_num">{{carData.bring_goods_all}}</div>
                </div>
                <div class="car_right">{{getPesent(carData.bring_goods_all,carData.self_employed_all)}}%</div>
            </div>
        </div>
        <div class="flexbox flexcenter carrier_list">
            <div class="flexbox flexcenter flexbetween carrier_type" @click="selectConType(1)" :class="{'active':carInfo.content_type == 1}">
                <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="active_img">
                    <path d="M22 0H0L22 20.5V0Z" fill="#4475FF" />
                    <circle cx="16" cy="6" r="2" fill="white" />
                </svg>
                <div class="type_left">
                    <div class="car_title flexbox flexcenter">
                        直播
                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="7.99998" cy="8.5001" r="6.4" fill="#CFD4DD" />
                            <path d="M5.9 7.58352V7.68352H6H6.99563H7.09563V7.58352C7.09563 7.22446 7.16399 6.95901 7.29458 6.78116L7.29464 6.78121L7.29689 6.77788C7.4381 6.5684 7.67117 6.46154 8.03493 6.46154C8.3138 6.46154 8.5202 6.53535 8.66173 6.67722C8.79814 6.82268 8.87817 7.02501 8.87817 7.29341C8.87817 7.48731 8.80942 7.67619 8.66547 7.85364L8.56575 7.97074C8.28297 8.22491 8.05495 8.4456 7.88263 8.63351C7.71126 8.82039 7.5897 8.98044 7.52616 9.11265C7.39461 9.3687 7.34105 9.67571 7.34105 10.0187V10.1418V10.2418H7.44105H8.44542H8.54541V10.1418V10.0187C8.54541 9.82265 8.58572 9.65332 8.66598 9.49174C8.73851 9.34573 8.84347 9.20725 8.99003 9.08431L8.99005 9.08433L8.99186 9.08274C9.40972 8.71469 9.668 8.47312 9.7514 8.37984L9.7517 8.38011L9.75705 8.37293C9.98162 8.07153 10.1 7.68915 10.1 7.23187C10.1 6.67197 9.91653 6.22096 9.5426 5.89135C9.17037 5.55441 8.68138 5.4 8.09607 5.4C7.42988 5.4 6.89613 5.59092 6.49799 5.98214C6.08947 6.3749 5.9 6.91362 5.9 7.58352ZM8.48142 11.0165L8.48147 11.0165L8.47895 11.0141C8.3276 10.8719 8.13639 10.8024 7.9214 10.8024C7.70507 10.8024 7.52302 10.8728 7.37258 11.0141C7.21862 11.1588 7.14891 11.3449 7.14891 11.5617C7.14891 11.7786 7.21862 11.9647 7.37258 12.1093C7.52051 12.2483 7.70169 12.3298 7.9214 12.3298C8.13773 12.3298 8.31978 12.2595 8.47022 12.1181C8.62279 11.9748 8.70262 11.7807 8.70262 11.5617C8.70262 11.3417 8.62216 11.1582 8.48142 11.0165Z" fill="white" stroke="white" stroke-width="0.2" />
                        </svg>
                    </div>
                    <div class="car_num flexbox flexcenter">
                        <span class="car_bold" v-if="carInfo.transaction_type==1">{{carData.self_employed_live}}</span>
                        <span class="car_bold" v-else>{{carData.bring_goods_live}}</span>
                    </div>
                </div>
                <div class="type_right" v-if="carInfo.transaction_type==1">{{getPesent2(carData.self_employed_live,carData.self_employed_all)}}%</div>
                <div class="type_right" v-else>{{getPesent2(carData.bring_goods_live,carData.bring_goods_all)}}%</div>
            </div>
            <div class="flexbox flexcenter flexbetween carrier_type" @click="selectConType(2)" :class="{'active':carInfo.content_type == 2}">
                <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="active_img">
                    <path d="M22 0H0L22 20.5V0Z" fill="#4475FF" />
                    <circle cx="16" cy="6" r="2" fill="white" />
                </svg>
                <div class="type_left">
                    <div class="car_title flexbox flexcenter">
                        短视频
                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="7.99998" cy="8.5001" r="6.4" fill="#CFD4DD" />
                            <path d="M5.9 7.58352V7.68352H6H6.99563H7.09563V7.58352C7.09563 7.22446 7.16399 6.95901 7.29458 6.78116L7.29464 6.78121L7.29689 6.77788C7.4381 6.5684 7.67117 6.46154 8.03493 6.46154C8.3138 6.46154 8.5202 6.53535 8.66173 6.67722C8.79814 6.82268 8.87817 7.02501 8.87817 7.29341C8.87817 7.48731 8.80942 7.67619 8.66547 7.85364L8.56575 7.97074C8.28297 8.22491 8.05495 8.4456 7.88263 8.63351C7.71126 8.82039 7.5897 8.98044 7.52616 9.11265C7.39461 9.3687 7.34105 9.67571 7.34105 10.0187V10.1418V10.2418H7.44105H8.44542H8.54541V10.1418V10.0187C8.54541 9.82265 8.58572 9.65332 8.66598 9.49174C8.73851 9.34573 8.84347 9.20725 8.99003 9.08431L8.99005 9.08433L8.99186 9.08274C9.40972 8.71469 9.668 8.47312 9.7514 8.37984L9.7517 8.38011L9.75705 8.37293C9.98162 8.07153 10.1 7.68915 10.1 7.23187C10.1 6.67197 9.91653 6.22096 9.5426 5.89135C9.17037 5.55441 8.68138 5.4 8.09607 5.4C7.42988 5.4 6.89613 5.59092 6.49799 5.98214C6.08947 6.3749 5.9 6.91362 5.9 7.58352ZM8.48142 11.0165L8.48147 11.0165L8.47895 11.0141C8.3276 10.8719 8.13639 10.8024 7.9214 10.8024C7.70507 10.8024 7.52302 10.8728 7.37258 11.0141C7.21862 11.1588 7.14891 11.3449 7.14891 11.5617C7.14891 11.7786 7.21862 11.9647 7.37258 12.1093C7.52051 12.2483 7.70169 12.3298 7.9214 12.3298C8.13773 12.3298 8.31978 12.2595 8.47022 12.1181C8.62279 11.9748 8.70262 11.7807 8.70262 11.5617C8.70262 11.3417 8.62216 11.1582 8.48142 11.0165Z" fill="white" stroke="white" stroke-width="0.2" />
                        </svg>
                    </div>
                    <div class="car_num flexbox flexcenter">
                        <span class="car_bold" v-if="carInfo.transaction_type==1">{{carData.self_employed_video}}</span>
                        <span class="car_bold" v-else>{{carData.bring_goods_video}}</span>
                    </div>
                </div>
                <div class="type_right" v-if="carInfo.transaction_type==1">{{getPesent2(carData.self_employed_video,carData.self_employed_all)}}%</div>
                <div class="type_right" v-else>{{getPesent2(carData.bring_goods_video,carData.bring_goods_all)}}%</div>
            </div>
            <div class="flexbox flexcenter flexbetween carrier_type" @click="selectConType(3)" :class="{'active':carInfo.content_type == 3}">
                <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="active_img">
                    <path d="M22 0H0L22 20.5V0Z" fill="#4475FF" />
                    <circle cx="16" cy="6" r="2" fill="white" />
                </svg>
                <div class="type_left">
                    <div class="car_title flexbox flexcenter">
                        商品卡
                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="7.99998" cy="8.5001" r="6.4" fill="#CFD4DD" />
                            <path d="M5.9 7.58352V7.68352H6H6.99563H7.09563V7.58352C7.09563 7.22446 7.16399 6.95901 7.29458 6.78116L7.29464 6.78121L7.29689 6.77788C7.4381 6.5684 7.67117 6.46154 8.03493 6.46154C8.3138 6.46154 8.5202 6.53535 8.66173 6.67722C8.79814 6.82268 8.87817 7.02501 8.87817 7.29341C8.87817 7.48731 8.80942 7.67619 8.66547 7.85364L8.56575 7.97074C8.28297 8.22491 8.05495 8.4456 7.88263 8.63351C7.71126 8.82039 7.5897 8.98044 7.52616 9.11265C7.39461 9.3687 7.34105 9.67571 7.34105 10.0187V10.1418V10.2418H7.44105H8.44542H8.54541V10.1418V10.0187C8.54541 9.82265 8.58572 9.65332 8.66598 9.49174C8.73851 9.34573 8.84347 9.20725 8.99003 9.08431L8.99005 9.08433L8.99186 9.08274C9.40972 8.71469 9.668 8.47312 9.7514 8.37984L9.7517 8.38011L9.75705 8.37293C9.98162 8.07153 10.1 7.68915 10.1 7.23187C10.1 6.67197 9.91653 6.22096 9.5426 5.89135C9.17037 5.55441 8.68138 5.4 8.09607 5.4C7.42988 5.4 6.89613 5.59092 6.49799 5.98214C6.08947 6.3749 5.9 6.91362 5.9 7.58352ZM8.48142 11.0165L8.48147 11.0165L8.47895 11.0141C8.3276 10.8719 8.13639 10.8024 7.9214 10.8024C7.70507 10.8024 7.52302 10.8728 7.37258 11.0141C7.21862 11.1588 7.14891 11.3449 7.14891 11.5617C7.14891 11.7786 7.21862 11.9647 7.37258 12.1093C7.52051 12.2483 7.70169 12.3298 7.9214 12.3298C8.13773 12.3298 8.31978 12.2595 8.47022 12.1181C8.62279 11.9748 8.70262 11.7807 8.70262 11.5617C8.70262 11.3417 8.62216 11.1582 8.48142 11.0165Z" fill="white" stroke="white" stroke-width="0.2" />
                        </svg>
                    </div>
                    <div class="car_num flexbox flexcenter">
                        <span class="car_bold" v-if="carInfo.transaction_type==1">{{carData.self_employed_product}}</span>
                        <span class="car_bold" v-else>{{carData.bring_goods_product}}</span>
                    </div>
                </div>
                <div class="type_right" v-if="carInfo.transaction_type==1">{{getPesent2(carData.self_employed_product,carData.self_employed_all)}}%</div>
                <div class="type_right" v-else>{{getPesent2(carData.bring_goods_product,carData.bring_goods_all)}}%</div>
            </div>
            <div class="flexbox flexcenter flexbetween carrier_type">
                <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="active_img">
                    <path d="M22 0H0L22 20.5V0Z" fill="#4475FF" />
                    <circle cx="16" cy="6" r="2" fill="white" />
                </svg>
                <div class="type_left">
                    <div class="car_title flexbox flexcenter">
                        其他
                        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="7.99998" cy="8.5001" r="6.4" fill="#CFD4DD" />
                            <path d="M5.9 7.58352V7.68352H6H6.99563H7.09563V7.58352C7.09563 7.22446 7.16399 6.95901 7.29458 6.78116L7.29464 6.78121L7.29689 6.77788C7.4381 6.5684 7.67117 6.46154 8.03493 6.46154C8.3138 6.46154 8.5202 6.53535 8.66173 6.67722C8.79814 6.82268 8.87817 7.02501 8.87817 7.29341C8.87817 7.48731 8.80942 7.67619 8.66547 7.85364L8.56575 7.97074C8.28297 8.22491 8.05495 8.4456 7.88263 8.63351C7.71126 8.82039 7.5897 8.98044 7.52616 9.11265C7.39461 9.3687 7.34105 9.67571 7.34105 10.0187V10.1418V10.2418H7.44105H8.44542H8.54541V10.1418V10.0187C8.54541 9.82265 8.58572 9.65332 8.66598 9.49174C8.73851 9.34573 8.84347 9.20725 8.99003 9.08431L8.99005 9.08433L8.99186 9.08274C9.40972 8.71469 9.668 8.47312 9.7514 8.37984L9.7517 8.38011L9.75705 8.37293C9.98162 8.07153 10.1 7.68915 10.1 7.23187C10.1 6.67197 9.91653 6.22096 9.5426 5.89135C9.17037 5.55441 8.68138 5.4 8.09607 5.4C7.42988 5.4 6.89613 5.59092 6.49799 5.98214C6.08947 6.3749 5.9 6.91362 5.9 7.58352ZM8.48142 11.0165L8.48147 11.0165L8.47895 11.0141C8.3276 10.8719 8.13639 10.8024 7.9214 10.8024C7.70507 10.8024 7.52302 10.8728 7.37258 11.0141C7.21862 11.1588 7.14891 11.3449 7.14891 11.5617C7.14891 11.7786 7.21862 11.9647 7.37258 12.1093C7.52051 12.2483 7.70169 12.3298 7.9214 12.3298C8.13773 12.3298 8.31978 12.2595 8.47022 12.1181C8.62279 11.9748 8.70262 11.7807 8.70262 11.5617C8.70262 11.3417 8.62216 11.1582 8.48142 11.0165Z" fill="white" stroke="white" stroke-width="0.2" />
                        </svg>
                    </div>
                    <div class="car_num flexbox flexcenter">
                        <span class="car_bold" v-if="carInfo.transaction_type==1">{{carData.self_employed_other}}</span>
                        <span class="car_bold" v-else>{{carData.bring_goods_other}}</span>
                    </div>
                </div>
                <div class="type_right" v-if="carInfo.transaction_type==1">{{getPesent2(carData.self_employed_other,carData.self_employed_all)}}%</div>
                <div class="type_right" v-else>{{getPesent2(carData.bring_goods_other,carData.bring_goods_all)}}%</div>
            </div>
        </div>
        <el-table :data="carList" class="com_table carrier_table" ref="carRef" @sort-change='sortChange'>
            <!-- <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                <img src="../../assets/img/null_icon.svg" alt="">
                <div class="font_13 color_03">暂无数据</div>
            </div> -->
            <el-table-column prop="user_name" :label="is_head?'账号':'渠道'" min-width="270" key="head">
                <template slot-scope="scope">
                    <template v-if="is_head">
                        <div class="flexbox flexcenter car_user">
                            <img :src="scope.row.author_logo" alt="" class="user_img">
                            <span class="user_name">{{scope.row.author_nick_name}}</span>
                        </div>
                    </template>
                    <template v-else>
                        {{scope.row.author_nick_name}}
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="stat_cost" label="消耗" sortable="custom">
            </el-table-column>
            <el-table-column prop="pay_amt" label="成交金额" sortable="custom">
            </el-table-column>
            <el-table-column prop="roi" label="ROI" sortable="custom">
            </el-table-column>
            <!-- <el-table-column prop="product_click_pay_pv_ratio" label="商品点击-支付转化率" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.product_click_pay_pv_ratio | keepTwoNum}}%
                </template>
            </el-table-column> -->
        </el-table>
        <div class="car_page flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="carInfo.page" :page-size="carInfo.limit" :page-sizes="[10, 50, 100, 200]" :total="carInfo.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: ["carList", "carInfo", "carData"],
    name: "",
    data() {
        return {};
    },
    computed: {
        is_click() {
            let is_show = true;
            if (
                this.carInfo.transaction_type == 1 &&
                this.carInfo.content_type == 1
            ) {
                is_show = false;
            } else if (
                this.carInfo.transaction_type == 1 &&
                this.carInfo.content_type == 2
            ) {
                is_show = false;
            }
            return is_show;
        },

        is_head() {
            let is_show = true;
            if (
                this.carInfo.transaction_type == 1 &&
                this.carInfo.content_type == 3
            ) {
                is_show = false;
            }
            return is_show;
        },
    },
    created() {},
    methods: {
        getPesent(val1,val2){
            let pe = null
            let total = Number(val2)+Number(val1)
            if(total==0){
                pe = 0
            }else{
                pe = ((Number(val1)/total)*100).toFixed(2)
            }
            return pe
        },

        getPesent2(val1,val2){
            let pe = null
            if(val2==0){
                pe = 0
            }else{
                pe = ((Number(val1)/Number(val2))*100).toFixed(2)
            }
            return pe
        },
        // 选择成交金额
        selectTranType(type){
            this.carInfo.transaction_type = type
            this.carInfo.page = 1;
            this.$emit("getCarData");
        },

        // 选择成交方式
        selectConType(type){
            this.carInfo.content_type = type
            this.carInfo.page = 1;
            this.$emit("getCarData");
        },
        // 表格排序
        sortChange(column) {
            this.carInfo.order_types = "";
            this.carInfo.order_field = "";
            if (!column.order) {
                this.carInfo.page = 1
                this.$emit("getCarData")
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.carInfo.order_types = order;
            this.carInfo.order_field = column.prop;
            this.carInfo.page = 1
            this.$emit("getCarData")
        },


        handleSizeChange(val) {
            this.carInfo.limit = val;
            this.carInfo.page = 1;
            this.$emit("getCarData");
        },

        handleCurrentChange(val) {
            this.carInfo.page = val;
            this.$emit("getCarData");
        },
    },
    components: {},
};
</script>


<style scoped>
.carrier_title {
    margin-top: 24px;
}
.finace_type {
    margin-top: 12px;
}
.finace_item {
    width: 88px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #b4b7bd;
    border-radius: 4px;
    background: rgba(165, 177, 209, 0.08);
    margin-right: 12px;
    cursor: pointer;
}
.finace_item.active {
    color: #4475ff;
    background: rgba(68, 117, 255, 0.08);
}

.revenue_count {
    border: 1px solid #ebebeb;
    border-radius: 6px;
    padding: 16px;
    margin-top: 12px;
}

.revenue_list {
    padding-left: 42px;
    position: relative;
    flex-wrap: wrap;
    overflow: hidden;
}
.revenue_class {
    position: absolute;
    width: 28px;
    box-sizing: border-box;
    padding: 0 6px;
    font-size: 14px;
    border-radius: 4px;
    left: 0;
    top: 0;
    bottom: 12px;
    text-align: center;
}
.revenue_class.red {
    color: #fa9393;
    background: rgba(254, 98, 98, 0.08);
    border: 1px solid rgba(254, 98, 98, 0.5);
}
.revenue_class.green {
    color: #3ed395;
    background: rgba(0, 194, 113, 0.08);
    border: 1px solid rgba(0, 194, 113, 0.5);
}
.revenue_class.gay {
    color: #a8a7a5;
    background: rgba(164, 167, 166, 0.08);
    border: 1px solid rgba(182, 182, 182, 0.5);
}
.revenue_class.blue {
    color: #92aeff;
    background: rgba(68, 117, 255, 0.08);
    border: 1px solid rgba(68, 117, 255, 0.5);
}
.revenue_item {
    padding: 12px 20px;
    border: 1px solid #f1f2f3;
    border-radius: 4px;
    width: 245px;
    height: 94px;
    box-sizing: border-box;
    margin-bottom: 12px;
    margin-right: 12px;
}
.revenue_title {
    font-size: 12px;
    color: #616c85;
    height: 17px;
}
.revenue_title svg {
    margin-left: 6px;
}
.revenue_num {
    font-family: D-DIN;
    font-weight: bold;
    line-height: 23px;
    font-size: 18px;
    height: 23px;
    color: #17233d;
    margin-top: 6px;
}
.revenue_pesent {
    font-size: 16px;
    color: #17233d;
    opacity: 0.15;
    font-family: D-DIN;
    font-weight: bold;
}
.revenue_type {
    font-size: 12px;
    height: 17px;
    margin-top: 6px;
    color: #b4b7bd;
}
.revenue_type i {
    margin: 0 5px;
}
.revenue_type .green {
    color: #00c271;
}
.carrier_list {
    margin-top: 12px;
}
.carrier_item {
    width: 580px;
    height: 100px;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 12px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.car_right {
    font-family: D-DIN;
    color: #17233d;
    opacity: 0.2;
    font-size: 24px;
}
.carrier_item.active {
    background: rgba(68, 117, 255, 0.05);
    border: 1px solid #4475ff;
}
.carrier_item.active .car_right {
    color: #4475ff;
    opacity: 1;
}
.carrier_item .active_img {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.carrier_item.active .active_img {
    display: block;
}
.carrier_type {
    width: 284px;
    height: 76px;
    box-sizing: border-box;
    padding: 16px;
    margin-right: 12px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.car_title {
    font-size: 14px;
    color: #17233d;
    height: 20px;
}
.car_title svg {
    margin-left: 5px;
}
.carrier_type .car_num {
    height: 18px;
    margin-top: 6px;
    font-size: 13px;
}
.car_num i {
    margin: 0 5px;
}
.car_num .green {
    color: #00c271;
}
.carrier_type .car_bold {
    font-family: D-DIN;
    color: #17233d;
    font-size: 14px;
}
.type_right {
    font-family: D-DIN;
    color: #17233d;
    opacity: 0.2;
    font-size: 16px;
}
.carrier_type .active_img {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.carrier_type.active {
    background: rgba(68, 117, 255, 0.05);
    border: 1px solid #4475ff;
}
.carrier_type.active .type_right {
    color: #4475ff;
    opacity: 1;
}
.carrier_type.active .active_img {
    display: block;
}
.car_user .user_img {
    width: 32px;
    height: 32px;
}
.finace_title {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
    line-height: 22px;
}

.user_name {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 14px;
    color: #17233d;
    height: 20px;
    line-height: 20px;
    margin-left: 8px;
}
.carrier_table {
    margin-top: 16px;
}
.car_page {
    margin-top: 20px;
}
</style>
